/**
Copyright 2015 The Cockroach Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the License for the specific language governing
permissions and limitations under the License.

Author: Matt Tracy (matt@cockroachlabs.com)
*/

@require 'typography.styl'
@require '../modules/layout-vars.styl'
@require '../modules/palette.styl'

$topbar-border      = $secondary-gray-1
$last-updated-color = $secondary-gray-2
$subnav-background  = $secondary-gray-3

*
  margin 0
  padding 0
  box-sizing border-box

html
body
  height 100%
  background-color $secondary-gray-4

#root
  position relative
  padding-left $nav-width
  min-height calc(100% - 4rem)

  &:after
    content ""
    display table
    clear both

.section
  padding 1rem 2rem

  &:after
    content ""
    display table
    clear both

  .topbar + &
    padding-top $top-bar-height + 10px

  .nav + &
    padding-top $top-bar-height + $subnav-height + 10px

  &.table
    margin 0
    padding 0

  h1
    font-family Lato-Medium
    font-size 23px
    color $main-navy
    margin-top 10px
    margin-bottom 10px
    font-weight normal


.topbar
  padding 0 3rem 1rem
  background-color white
  border-bottom 1px solid $topbar-border
  height $top-bar-height
  width "calc(100% - %s)" % $nav-width
  position fixed
  top 0
  right 0
  z-index 1

  h2
    font-size 3.6rem
    font-family Lato-Medium
    color $main-navy
    line-height $top-bar-height
    padding-top 0
    margin-top 0
    display inline-block

  .last-updated
    display inline-block
    margin-left 25px
    line-height $top-bar-height
    vertical-align bottom
    font-size 1.1rem
    font-family Lato-Medium
    color $last-updated-color

    strong
      font-family Lato-Bold

.page .nav
  padding 0 3rem 1rem
  background-color $subnav-background
  text-transform uppercase
  letter-spacing 2.17px
  border-bottom 1px solid $secondary-gray-1
  height $subnav-height
  position fixed
  top $top-bar-height
  right 0
  width "calc(100% - %s)" % $nav-width
  z-index 1

.sql-table
  margin 20 20

a.toggle
  font Lato-Bold
  font-size 1rem
  color $secondary-light-gray

.status
  font-size 9px
  &.missing
    color $secondary-red
  &.stale
    color $secondary-gold
  &.healthy
    color $main-green
